<template>
    <div class="list-cover-contauner">
    <div
      class="song-list-cover"
      v-for="(item, index) in songListCoverData.songListCoverData"
      :key="index"
      @click="skipThisSongListCover(item.id)"
    >
      <!-- 右上角播放按键 -->
      <div class="play-button">
        <i class="iconfont icon-24gl-play"></i>
        <span v-if="item.playcount">{{ unitConversion(item.playcount) }}</span>
        <span v-else>{{ unitConversion(item.playCount) }}</span>
      </div>
      <!-- 右下角播放器 -->
      <div class="play-button-right">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-bofang-copy"></use>
        </svg>
      </div>
      <div class="cover-box">
        <img :src="item.picUrl" v-if="item.picUrl"/>
        <img :src="item.coverImgUrl" v-else/>
      </div>
      <div class="cover-title">
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter} from "vue-router";
import { useStore } from "vuex";
import "../../assets/fonts/play-video/iconfont";
import unitConversion from "../../hook/unitConversion";

const router = useRouter();
const store = useStore();

// 接收父组件数据
const songListCoverData = defineProps(["songListCoverData"]);

// 跳转到指定的路由
const skipThisSongListCover = (id) => {
  store.commit("m_song/updateSongListId", id);
  router.push({
    name: "singList",
  });
};
</script>
<style lang="less">
@import url(../../assets/fonts/play-video/iconfont.css);

.list-cover-contauner {
  width: 1100px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;

  .song-list-cover {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 205px;
    margin-top: 10px;

    &:hover {
      cursor: pointer;
      .play-button-right {
        opacity: 1;
      }
    }

    .play-button {
      transition: all 0.3s;
      margin-top: 2px;
      display: flex;
      align-items: flex-end;
      position: absolute;
      right: 6px;
      color: white;

      i {
        margin-right: 2px;
        font-size: 12px;
      }
    }

    .play-button-right {
      position: absolute;
      right: 8px;
      bottom: 0px;
      opacity: 0;
      transition: all 0.5s;

      svg {
        width: 38px;
      }
    }

    .cover-box {
      height: 205px;

      img {
        width: 100%;
        height: 100%;
        border-radius: 6px;
      }
    }

    .cover-title {
      margin-top: 6px;
      font-size: 14px;
      /* 文字省略 */
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      transition: all 0.3s;

      &:hover {
        cursor: pointer;
        color: black;
      }
    }
  }
}
</style>